<template>
  <video
    ref="videoElement"
    :width="width"
    :height="height"
    style="background-color: #ccc;"
    controls
    autoplay
  >Your browser is too old which doesn't support HTML5 video.</video>
</template>

<script>
  import flvjs from 'flv.js'
  export default {
    props: {
      id: {
        type: Number,
        default: 0
      },
      rtsp: {
        type: String,
        default: ''
      },
      width: {
        type: String,
        default: '100'
      },
      height: {
        type: String,
        default: '100%'
      }
    },
    data() {
      return {
        flvPlayer: null
      }
    },
    mounted() {
      if (flvjs.isSupported()) {
        let videoElement = this.$refs.videoElement
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}`,
          isLive: true,
          cors: true
        })
        this.flvPlayer.attachMediaElement(videoElement)
        this.flvPlayer.load()
        this.flvPlayer.play()
      }
    },
    beforeDestroy() {
      this.flvPlayer.pause()
        this.flvPlayer.unload()
        this.flvPlayer.detachMediaElement()
        this.flvPlayer.destroy()
        this.flvPlayer = null
    }
  }
</script>